<section class="border-2 flex">
  <%= live_component @socket, InstagramCloneWeb.UserLive.SettingsSidebarComponent,
    settings_path: @settings_path,
    pass_settings_path: @pass_settings_path,
    current_uri_path: @current_uri_path %>

  <div class="w-full py-5">
    <!-- Profile Photo -->
    <div class="flex items-center">
      <div class="w-1/3">
        <%= img_tag Avatar.get_thumb(@current_user.avatar_url), class: "ml-auto w-10 h-10 rounded-full object-cover object-center" %>
      </div>
      <div class="w-full pl-8">
        <h1 class="font-semibold text-xl truncate text-gray-600"><%= @current_user.username %></h1>
      </div>
    </div>
    <!-- End Profile Photo -->
    <%= f = form_for @changeset, "#",
      phx_submit: "save",
      class: "space-y-5 md:space-y-8"  %>

      <div class="md:flex items-center">
        <%= label f, :old_password, "Old Password", class: "w-1/3 text-right font-semibold", for: "current_password_for_password" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :current_password, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :current_password, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <%= label f, :password, "New Password", class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :password, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :password, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="md:flex items-center">
        <%= label f, :password_confirmation, "Confirm New Password", class: "w-1/3 text-right font-semibold" %>
        <div class="w-full pl-8 pr-20">
          <%= password_input f, :password_confirmation, required: true, class: "w-4/6 rounded p-1 text-semibold text-gray-600 border-gray-300 focus:ring-transparent focus:border-black" %>
          <%= error_tag f, :password_confirmation, class: "text-red-700 text-sm block" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="w-1/3"></label>
        <div class="w-full pl-8 pr-20">
          <%= submit "Change Password", phx_disable_with: "Saving...", class: "py-1 px-2 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 cursor-pointer" %>
        </div>
      </div>

      <div class="flex items-center">
        <label class="w-1/3"></label>
        <div class="w-full pl-8 pr-20 text-right">
          <%= link "Forgot Password?", to: Routes.user_reset_password_path(@socket, :new), class: "font-semibold text-xs hover:text-light-blue-600 text-light-blue-500 cursor-pointer hover:underline" %>
        </div>
      </div>
    </form>
  </div>
</section>
